<template>
  <div class="pagination-container">
    <el-pagination :background="background" :current-page.sync="currentPage" :page-size.sync="pageSize" :layout="layout"
      :page-sizes="pageSizes" :total="total" :small="small" :pager-count="pagerCount" :class="align" v-bind="$attrs"
      @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :popper-class="`pagination-popper ${popperClass}`" />
  </div>
</template>

<script>
// import { scrollTo } from "@/utils/scroll-to";

export default {
  name: 'Pagination',
  props: {
    total: {
      required: true,
      type: Number,
    },
    page: {
      type: Number,
      default: 1,
    },
    pagerCount: {
      type: Number,
      default: 5,
    },
    limit: {
      type: Number,
      default: 20,
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50]
      },
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next',
    },
    background: {
      type: Boolean,
      default: true,
    },
    small: {
      type: Boolean,
      default: false,
    },
    // autoScroll: {
    //   type: Boolean,
    //   default: false
    // },
    hidden: {
      type: Boolean,
      default: false,
    },
    align: {
      type: String,
      default: 'right',
    },
    popperClass: {
      type: String,
      default: '',
    },
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      },
    },
    pageSize: {
      get() {
        return this.limit
      },
      set(val) {
        this.$emit('update:limit', val)
      },
    },
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { page: this.currentPage, limit: val })
      // if (this.autoScroll) {
      //   scrollTo(0, 800);
      // }
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { page: val, limit: this.pageSize })
      // if (this.autoScroll) {
      //   scrollTo(0, 800);
      // }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '~@/assets/scss/variable.scss';

.pagination-container {
  height: px(25);
  margin-top: px(10);
  margin-bottom: px(10);

  ::v-deep .el-pagination {
    position: absolute;
    padding: px(2) px(5);
    .el-select .el-input .el-select__caret {
      font-size: px(14);
      width: px(25);
    }
    .btn-next .el-icon,
    .btn-prev .el-icon {
      font-size: px(14);
      min-width: px(22);
      margin: 0 px(3);
    }
    button,
    span:not([class*='suffix']) {
      font-size: px(14);
      height: px(28);
      line-height: px(28);
    }
    .el-select .el-input {
      width: px(100);
      margin: 0 px(5);
    }
    .el-pager li {
      margin: 0 px(5);
      min-width: px(30);
      border-radius: px(2);
      font-size: px(14);
      height: px(28);
      line-height: px(28);
      padding: 0 px(4);
    }
    .el-pagination__sizes {
      .el-select.el-select--mini {
        .el-input__inner {
          font-size: px(14);
          height: px(28);
          line-height: px(28);
        }
      }
      .el-input__icon {
        line-height: px(28);
        font-size: px(14);
      }
    }
  }
  &.hidden {
    display: none;
  }
  .right {
    right: px(15);
  }

  .left {
    left: px(15);
  }
}
</style>
<style lang="scss">
@import '~@/assets/scss/variable.scss';

.pagination-popper {
  .el-scrollbar {
    border-radius: px(3);
  }

  .el-select-dropdown__item {
    font-size: px(14);
    height: px(34);
    line-height: px(34);
  }
}
</style>
